<!-- PageDivEditor.vue - 内容编辑页面（支持独立模式） -->
<template>
  <div class="standalone-mode" >
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="standalone-logo">
          <span class="logo-text">📝 内容编辑</span>
        </div>

        <h2 class="page-title">{{ pageTitle }}</h2>

        <div class="header-actions">
          <el-button @click="previewContent" type="info" plain :icon="View">
            预览
          </el-button>
          <el-button type="primary" @click="handleSubmit" :loading="saving" :icon="Check">
            保存
          </el-button>
        </div>
      </div>
    </div>

    <!-- 页面内容 -->
    <div class="page-content" v-loading="loading">
      <el-card class="editor-card">
        <el-form :model="formData" ref="formRef" :rules="rules" label-width="100px" size="default">
          <!-- 商品信息编辑 -->
          <div class="form-section">
            <div class="form-section-title">
              <el-icon><InfoFilled/></el-icon>
              商品信息
            </div>

            <el-form-item label="商品标题" prop="title">
              <el-input
                  v-model="formData.title"
                  placeholder="请输入商品标题"
                  maxlength="200"
                  show-word-limit
                  clearable
                  style="font-size: 18px"
              />
            </el-form-item>
          </div>

          <!-- 内容编辑区域 -->
          <div class="form-section">
            <div class="form-section-title">
              <el-icon><EditPen/></el-icon>
              内容编辑
            </div>

            <el-form-item prop="pageDiv">
              <div class="editor-wrapper">

                <!-- TinyMCE 富文本编辑器 -->
                <div class="tinymce-editor">
                  <Editor
                      v-model="formData.pageDiv"
                      :api-key="tinymceApiKey"
                      :init="tinymceConfig"
                      @input="updateContentLength"
                      @setup="handleEditorSetup"
                  />
                </div>

                <div class="editor-footer">
                  <span class="content-length">内容长度: {{ contentLength }}</span>
                  <span class="last-modified" v-if="productInfo?.updateTime">
                    最后修改: {{ productInfo.updateTime }}
                  </span>
                </div>
              </div>
            </el-form-item>
          </div>
        </el-form>
      </el-card>
    </div>

    <!-- 预览对话框 -->
    <el-dialog
        v-model="previewVisible"
        title="内容预览"
        width="80%"
        class="preview-dialog"
    >
      <div class="preview-toolbar">
        <el-radio-group v-model="previewMode" size="small">
          <el-radio-button label="table">表格视图</el-radio-button>
          <el-radio-button label="html">HTML源码</el-radio-button>
        </el-radio-group>
      </div>

      <div class="preview-content" :class="previewMode">
        <div v-if="previewMode === 'table'" v-html="previewHtml"></div>
        <pre v-else><code>{{ previewHtml }}</code></pre>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import {computed, nextTick, onMounted, reactive, ref} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {ElMessage} from 'element-plus'
import {Check, EditPen, InfoFilled, View} from '@element-plus/icons-vue'
import Editor from '@tinymce/tinymce-vue'
import {useProductStore} from '@/stores/product'

const route = useRoute()
const router = useRouter()
const productStore = useProductStore()


// 响应式数据
const loading = ref(false)
const saving = ref(false)
const formRef = ref()
const editorInstance = ref(null)
const contentLength = ref(0)
const previewVisible = ref(false)
const previewMode = ref('table')
const previewHtml = ref('')
const productInfo = ref(null)

// 表单数据
const formData = reactive({
  id: null,
  title: '',
  pageDiv: '',
})

// 表单验证规则
const rules = {
  title: [{ required: true, message: '请输入商品标题', trigger: 'blur' }],
  pageDiv: [{ required: true, message: '请输入内容', trigger: 'blur' }]
}

// 计算属性
const pageTitle = computed(() => {
  if (formData.title) {
    return `编辑商品内容 - ${formData.title}`
  }
  return '编辑商品内容'
})

// 获取商品ID
const productId = computed(() => route.params.id)

// TinyMCE 配置
const tinymceApiKey = 'ycamu6hikog3ki66tibtyujs8o56b0rlvryh5aqzf3y82max'

const tinymceConfig = {
  height: 800,
  width: 1200,
  language: 'zh-CN',
  menubar: false,
  branding: false,
  toolbar: 'undo redo | code | bold italic | insertTimeRow insertContentRow | preview',
  plugins: ['code'],
  valid_elements: '*[*]',
  forced_root_block: false,
  force_p_newlines: false,
  verify_html: false,
  cleanup: false,
  convert_urls: false,
  content_style: `
  .print_table_box {
    margin: 0 24px
}

.print_table {
    width: 964px;
    table-layout: fixed;
    overflow: hidden;
\tmargin: 0 auto;
}

.print_table td {
    vertical-align: middle;
    text-align: center;
    padding: 24px 0;
    border-bottom: 1px solid #eee
}

.print_table th {
    vertical-align: top;
    padding: 16px 0;
    background: #f6f8fa;
    font-size: 18px;
    color: #333
}

.print_table th.print_table_th_right {
    text-align: left;
    padding-left: 24px;
    line-height: 24px
}

.print_table_th_right .icon_common_singlearrow {
    margin: 0 10px
}

.print_table_time {
    font-size: 14px;
    color: #333;
    line-height: 18px;
    font-weight: 700
}

.print_table_time_text {
    font-size: 14px;
    color: #333;
    line-height: 18px;
    margin-top: 8px
}

.print_table td.print_table_td_right {
    text-align: left;
    padding-left: 24px
}

.print_table_title {
    font-size: 14px;
    color: #333;
    line-height: 18px;
    font-weight: 700;
    margin-bottom: 8px
}

.print_table_td_text {
    font-size: 14px;
    color: #333;
    line-height: 22px;
    margin-bottom: 4px
}

.print_table_td_text img {
\tmax-width: 100%
}

.print_table_td_or {
    margin-left: 32px;
    margin-right: 5px
}

.print_table tr:last-child td {
    border-bottom: 0
}

.print_table_td_gray {
    color: #666;
    line-height: 19px;
    margin-top: 8px
}

.print_table_grade_box {
    font-size: 14px;
    color: #333;
    line-height: 22px;
    margin-bottom: 6px
}

.print_table_grade_nb {
    font-weight: 700;
    margin-left: 8px
}

.print_table_grade_nb i {
    font-size: 12px
}

.print_table_grade_tip {
    background: #f6f8fa;
    border-radius: 1px;
    line-height: 20px;
    padding: 0 4px;
    margin-left: 8px
}

.print_table_text_gray {
    color: #999;
    margin-bottom: 8px;
    line-height: 22px
}

.bg-\\[\\#f6f8fa\\] {
    --tw-bg-opacity: 1;
    background-color: rgb(246 248 250 / var(--tw-bg-opacity, 1));
}

.p-4 {
    padding: 1rem;
}

.text-\\[\\#333\\] {
    --tw-text-opacity: 1;
    color: rgb(51 51 51 / var(--tw-text-opacity, 1));
}
.font-bold {
    font-weight: 700;
}
.text-\\[14px\\] {
    font-size: 14px;
}

@font-face {
    src: url(data:application/octet-stream;base64,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);
    src: url(data:application/octet-stream;base64,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);
    src: url(data:application/font-woff;base64,d09GRgABAAAAAAQcAAoAAAAABlgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAAA9AAAAD4AAABWN9xi8WNtYXAAAAE0AAAAXQAAAZqBgeXrZ2x5ZgAAAZQAAACIAAAAlAnrFKNoZWFkAAACHAAAAC0AAAA2IdMYfGhoZWEAAAJMAAAAGwAAACQINAQFaG10eAAAAmgAAAAOAAAAEBAAAABsb2NhAAACeAAAAAoAAAAKAGgAOG1heHAAAAKEAAAAHwAAACABDwAYbmFtZQAAAqQAAAEsAAACIssLS+5wb3N0AAAD0AAAAEwAAABnTSlP93icY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGBwepv//zwLixrBAhBlBBADQOQpgAAB4nGNgYGBhYGBgBmIVBkYGEAgB8hjBfGYGLgYGxiigCgMgnwMImUAKHqY/qvj/H5klN0u2C6obDBjZGEYBD5h0gPJYUCUfpkMwKNQeVUAwMHT5uf+BMTBGACtrE8gAAAB4nE2MIQ7CQBBF/3SYJQ1yEyrQZcWKVrEXoBes4y4IzPpiIE2ztqYXIBUDm4Dgiyde8j4IeTzwHTvA7lGdEI5wBq2QiZGMiK4x6logQ/4k8G2ffEMJ1GJdfSDZWnprCgt1fU/dEsYLneeGnI7NrNdf82CPTT6oSgrFK6lXn9hP2tIw4QMTkCuKeJxjYGRgYADi8gXRM+L5bb4ycLMwgMD9vJfXkWnm68wXgRQHAxOIBwBHwAuNAAAAeJxjYGRgYGEAghgwycB8nYGRARWwAAAbKQFFAHicY2FgYGBBwgAAsAARAAAAAAAAAB4AOABKAAB4nGNgZGBgYGHgYQDRDAxMQMwFhAwM/8F8BgAJ+QEoAHicbY9LbsIwGIQnvKqCVKFWQurO6qKbquGxYMEBYA9S9iE4CSjEkWOQuEBP0DP0DD1Blz1Dj9JJ+MWi1Jacb+afjGUAfXzBQ7U83NZntRq4oTpzk9QXbpEfhdvo4Um4Q/9VuIsXTIV7eEDIBq9Vtd3DCTdwhzfhJv134Rb5Q7iNAT6FO/S/hbsI8CPcw7M3TY3T2cqFdqmTQxbai75AoG25Nbka+6OLt9C5tqHTG7U+qfKYTJyLVWzNXs1NzkxmVGHNTkfOT50rZsNhLL4fmT1SGL5GI8OK3xAWS6oEBzqVup5fOwGVRYktJzkUxvAx+ie3oMrrbFhPNsyuceJZ4sg7J3QdYuqYGYM9aV53nnsyskJRz3Z0Ivo+76n+KjDDkDv+k/eZYtMvtDNhunicY2BigAAuBuyAhYGBkYmRmZFFJKU0KzNRt7I0MS8lMzEv1dDMWDdfACJYkZmXnmpkbq6bD1VVBVRVnJGZZpCUlqqbz8AAAJaEFK8=);
    font-family: hotelStar__1ezodq0
}

.hotelStar__1ezodq1 {
    margin-right: 2px;
    vertical-align: -1px;
    width: 12px;
    height: 12px;
    font-size: 14px
}

.hotelStar__1ezodq2 {
    font-size: 16px;
    margin-right: 1px;
    margin-top: 4px;
    vertical-align: -4px
}

.hotelStar__1ezodq3::before {
    content: "\\e278";
    font-family: hotelStar__1ezodq0
}

.hotelStar_yellow__1ezodq4::before {
    color: #feaf00
}

.hotelStar_black__1ezodq5::before {
    color: #000
}

.hotelStar__1ezodq6::before {
    content: "\\e167";
    font-family: hotelStar__1ezodq0
}

.hotelStar_yellow__1ezodq7::before {
    color: #feaf00
}

.hotelStar_black__1ezodq8::before {
    color: #000
}

.hotelStar__1ezodq9::before {
    content: "\\f0bfe";
    font-family: hotelStar__1ezodq0
}

.hotelStar_yellow__1ezodqa::before {
    color: #feaf00
}

.hotelStar_black__1ezodqb::before {
    color: #000
}

.style__g19w3l0 {
    font-size: 12px;
    width: 12px;
    margin-right: 4px
}

.style__g19w3l1 {
    font-size: 14px;
    color: #666;
    line-height: 22px;
    margin-top: 8px;
    margin-left: 24px;
    margin-bottom: 8px
}

.style__g19w3l1::after {
    content: "";
    clear: both;
    display: block;
    height: 0;
    overflow: hidden
}

.style__g19w3l1 .icon_base {
    line-height: 22px;
    top: -2px;
    margin-right: 8px;
    -webkit-transform: scale(1.2);
    transform: scale(1.2)
}

.style__g19w3l0 {
    font-size: 12px;
    width: 12px;
    margin-right: 4px;
    font-style: normal;
}


.leading-\\[22px\\] {
    line-height: 22px;
}
.p-\\[16px\\] {
    padding: 16px;
}
.flex-row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}

.flex {
\tdisplay: flex;
}

.flex-1 {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;
}

.flex-none {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -ms-flex: none;
    flex: none
}

.flex-grow {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.bg-gray-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.gap-1 {
    gap: .25rem
}

.gap-2 {
    gap: .5rem
}

.gap-4 {
    gap: 1rem
}

.flex-col {
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-flex-direction
Specifies how flex items are placed in the flex container, by setting the direction of the flex container's main axis.
: column;
    flex-direction: column;
}

.flex-col, .flex-row {
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
}

.grid
 {
    display: grid
;
}

.grid-cols-2 {
    grid-template-columns: repeat(2,minmax(0,1fr))
}

.grid-cols-\\[46px_auto\\] {
    grid-template-columns: 46px auto
}

.visible {
    visibility: visible
}

.collapse {
    visibility: collapse
}

.fixed {
    position: fixed
}

.absolute {
    position: absolute
}

.relative {
    position: relative
}

.-left-3 {
    left: -.75rem
}

.-top-4 {
    top: -1rem
}

.bottom-20 {
    bottom: 5rem
}

.bottom-\\[2px\\] {
    bottom: 2px
}

.left-0 {
    left: 0
}

.left-\\[-25px\\] {
    left: -25px
}

.right-0 {
    right: 0
}

.right-\\[60px\\] {
    right: 60px
}

.top-0 {
    top: 0
}

.top-\\[-5px\\] {
    top: -5px
}

.top-\\[25px\\] {
    top: 25px
}

.top-\\[75px\\] {
    top: 75px
}

.top-\\[8px\\] {
    top: 8px
}

.z-\\[900\\] {
    z-index: 900
}

.col-span-1 {
    grid-column: span 1/span 1
}

.\\!my-\\[5px\\] {
    margin-top: 5px!important;
    margin-bottom: 5px!important
}

.mx-1 {
    margin-left: .25rem;
    margin-right: .25rem
}

.mx-2 {
    margin-left: .5rem;
    margin-right: .5rem
}

.mx-4 {
    margin-left: 1rem;
    margin-right: 1rem
}

.mx-\\[24px\\] {
    margin-left: 24px;
    margin-right: 24px
}

.my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem
}

.mb-1 {
    margin-bottom: .25rem
}

.mb-2 {
    margin-bottom: .5rem
}

.mb-4 {
    margin-bottom: 1rem
}

.mb-\\[20px\\] {
    margin-bottom: 20px
}

.mb-\\[3px\\] {
    margin-bottom: 3px
}

.mb-\\[4px\\] {
    margin-bottom: 4px
}

.mb-\\[8px\\] {
    margin-bottom: 8px
}

.ml-1 {
    margin-left: .25rem
}

.ml-2 {
    margin-left: .5rem
}

.ml-4 {
    margin-left: 1rem
}

.ml-\\[4px\\] {
    margin-left: 4px
}

.mr-1 {
    margin-right: .25rem
}

.mr-2 {
    margin-right: .5rem;
}

.mr-4 {
    margin-right: 1rem
}

.mt-2 {
    margin-top: .5rem
}

.mt-4 {
    margin-top: 1rem
}

.box-border {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.block {
    display: block
}

.inline-block {
    display: inline-block
}

.inline {
    display: inline
}

.flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
}

.table {
    display: table
}

.table-column {
    display: table-column
}

.table-row-group {
    display: table-row-group
}

.table-row {
    display: table-row
}

.grid {
    display: grid
}

.hidden {
    display: none
}

.h-8 {
    height: 2rem
}

.h-\\[1px\\] {
    height: 1px
}

.h-\\[20px\\] {
    height: 20px
}

.h-\\[36px\\] {
    height: 36px
}

.h-\\[5px\\] {
    height: 5px
}

.h-\\[60px\\] {
    height: 60px
}

.h-\\[84px\\] {
    height: 84px
}

.h-\\[92px\\] {
    height: 92px
}

.\\!w-\\[60px\\] {
    width: 60px!important
}

.w-0 {
    width: 0
}

.w-36 {
    width: 9rem
}

.w-8 {
    width: 2rem
}

.w-\\[204px\\] {
    width: 204px
}

.w-\\[229px\\] {
    width: 229px
}

.w-\\[5px\\] {
    width: 5px
}

.w-\\[60px\\] {
    width: 60px
}

.w-\\[84px\\] {
    width: 84px
}

.w-\\[92px\\] {
    width: 92px
}

.w-full {
    width: 100%
}

.flex-1 {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%
}

.flex-none {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -ms-flex: none;
    flex: none
}

.table-fixed {
    table-layout: fixed
}

.border-collapse {
    border-collapse: collapse
}

.border-spacing-0 {
    --tw-border-spacing-x: 0px;
    --tw-border-spacing-y: 0px;
    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y)
}

.cursor-pointer {
    cursor: pointer
}

.list-none {
    list-style-type: none
}

.grid-cols-2 {
    grid-template-columns: repeat(2,minmax(0,1fr))
}

.grid-cols-\\[46px_auto\\] {
    grid-template-columns: 46px auto
}

.flex-row {
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -ms-flex-direction: row;
    flex-direction: row
}

.flex-col,.flex-row {
    -webkit-box-direction: normal;
    -moz-box-direction: normal
}

.flex-col {
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-flex-direction: column;
    flex-direction: column
}

.flex-wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.content-center {
    -ms-flex-line-pack: center;
    align-content: center
}

.items-start {
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

.items-center {
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.justify-start {
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.justify-center {
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.gap-1 {
    gap: .25rem
}

.gap-2 {
    gap: .5rem
}

.gap-4 {
    gap: 1rem
}

.break-words {
    overflow-wrap: break-word
}

.break-all {
    word-break: break-all
}

.rounded {
    border-radius: .25rem
}

.rounded-\\[2px\\] {
    border-radius: 2px
}

.rounded-\\[4px\\] {
    border-radius: 4px
}

.rounded-\\[5px\\] {
    border-radius: 5px
}

.rounded-md {
    border-radius: .375rem
}

.rounded-sm {
    border-radius: .125rem
}

.\\!border-0 {
    border-width: 0!important
}

.border {
    border-width: 1px
}

.border-0 {
    border-width: 0
}

.border-\\[1px\\] {
    border-width: 1px
}

.border-t-\\[1px\\] {
    border-top-width: 1px
}

.border-solid {
    border-style: solid
}

.border-dotted {
    border-style: dotted
}

.border-\\[\\#808080\\] {
    --tw-border-opacity: 1;
    border-color: rgb(128 128 128/var(--tw-border-opacity,1))
}

.border-\\[\\#efefef\\] {
    --tw-border-opacity: 1;
    border-color: rgb(239 239 239/var(--tw-border-opacity,1))
}

.border-\\[\\#f7f7f7\\] {
    --tw-border-opacity: 1;
    border-color: rgb(247 247 247/var(--tw-border-opacity,1))
}

.border-gray-300 {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219/var(--tw-border-opacity,1))
}

.border-inherit {
    border-color: inherit
}

.bg-\\[\\#328EFFE6\\] {
    background-color: #328effe6
}

.bg-\\[\\#EBF4FF\\] {
    --tw-bg-opacity: 1;
    background-color: rgb(235 244 255/var(--tw-bg-opacity,1))
}

.bg-\\[\\#ccc\\] {
    --tw-bg-opacity: 1;
    background-color: rgb(204 204 204/var(--tw-bg-opacity,1))
}

.bg-\\[\\#f6f8fa\\] {
    --tw-bg-opacity: 1;
    background-color: rgb(246 248 250/var(--tw-bg-opacity,1))
}

.bg-\\[\\#f7f7f7\\] {
    --tw-bg-opacity: 1;
    background-color: rgb(247 247 247/var(--tw-bg-opacity,1))
}

.bg-color-0086f6 {
    --tw-bg-opacity: 1;
    background-color: rgb(0 134 246/var(--tw-bg-opacity,1))
}

.bg-gray-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246/var(--tw-bg-opacity,1))
}

.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity,1))
}

.\\!p-0 {
    padding: 0!important
}

.p-4 {
    padding: 1rem
}

.p-\\[16px\\] {
    padding: 16px
}

.px-\\[12px\\] {
    padding-left: 12px;
    padding-right: 12px
}

.px-\\[20px\\] {
    padding-left: 20px;
    padding-right: 20px
}

.px-\\[2px\\] {
    padding-left: 2px;
    padding-right: 2px
}

.py-\\[10px\\] {
    padding-top: 10px;
    padding-bottom: 10px
}

.py-\\[8px\\] {
    padding-top: 8px;
    padding-bottom: 8px
}

.pb-6 {
    padding-bottom: 1.5rem
}

.pl-\\[12px\\] {
    padding-left: 12px
}

.pr-2 {
    padding-right: .5rem
}

.pr-\\[4px\\] {
    padding-right: 4px
}

.text-left {
    text-align: left
}

.text-center {
    text-align: center
}

.indent-0 {
    text-indent: 0
}

.align-top {
    vertical-align: top
}

.align-middle {
    vertical-align: middle
}

.\\!text-\\[15px\\] {
    font-size: 15px!important
}

.\\!text-\\[16px\\] {
    font-size: 16px!important
}

.text-\\[12px\\] {
    font-size: 12px
}

.text-\\[13px\\] {
    font-size: 13px
}

.text-\\[14px\\] {
    font-size: 14px
}

.text-\\[18px\\] {
    font-size: 18px
}

.text-\\[32px\\] {
    font-size: 32px
}

.text-sm {
    font-size: .875rem;
    line-height: 1.25rem
}

.text-xs {
    font-size: .75rem;
    line-height: 1rem
}

.font-\\[500\\] {
    font-weight: 500
}

.font-bold {
    font-weight: 700
}

.font-normal {
    font-weight: 400
}

.font-semibold {
    font-weight: 600
}

.leading-\\[18px\\] {
    line-height: 18px
}

.leading-\\[20px\\] {
    line-height: 20px
}

.leading-\\[22px\\] {
    line-height: 22px
}

.leading-\\[40px\\] {
    line-height: 40px
}

.text-\\[\\#006FF6\\] {
    --tw-text-opacity: 1;
    color: rgb(0 111 246/var(--tw-text-opacity,1))
}

.text-\\[\\#0f294d\\] {
    --tw-text-opacity: 1;
    color: rgb(15 41 77/var(--tw-text-opacity,1))
}

.text-\\[\\#333\\] {
    --tw-text-opacity: 1;
    color: rgb(51 51 51/var(--tw-text-opacity,1))
}

.text-\\[\\#666666\\],.text-\\[\\#666\\] {
    --tw-text-opacity: 1;
    color: rgb(102 102 102/var(--tw-text-opacity,1))
}

.text-\\[\\#FF5500\\] {
    --tw-text-opacity: 1;
    color: rgb(255 85 0/var(--tw-text-opacity,1))
}

.text-\\[\\#FF7700\\] {
    --tw-text-opacity: 1;
    color: rgb(255 119 0/var(--tw-text-opacity,1))
}

.text-\\[\\#ff6f00\\] {
    --tw-text-opacity: 1;
    color: rgb(255 111 0/var(--tw-text-opacity,1))
}

.text-\\[\\#fff\\] {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity,1))
}

.text-gray-300 {
    --tw-text-opacity: 1;
    color: rgb(209 213 219/var(--tw-text-opacity,1))
}

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity,1))
}

.shadow-\\[0_2px_12px_0_rgba\\(0\\2c 0\\2c 0\\2c 0\\.06\\)\\] {
    --tw-shadow: 0 2px 12px 0 rgba(0,0,0,.06);
    --tw-shadow-colored: 0 2px 12px 0 var(--tw-shadow-color);
    -webkit-box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)
}

.outline {
    outline-style: solid
}

.filter {
    -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

@font-face {
    font-family: detail_itinerary_icons;
    src: url(data:application/octet-stream;base64,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);
    src: url(data:font/ttf;base64,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)
}

.icon_itinerary_disband:before {
    content: "\\f1ac6";
    font-family: detail_itinerary_icons
}

.icon_itinerary_assembly:before {
    content: "\\f1ac7";
    font-family: detail_itinerary_icons
}

.icon_itinerary_assembly_time:before {
    content: "\\f1ac8";
    font-family: detail_itinerary_icons
}

.icon_itinerary_assembly_location:before {
    content: "\\f1ac9";
    font-family: detail_itinerary_icons
}

.print_table_box * {
    max-width: 100%
}

.hover\\:bg-color-2470e1:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(36 112 225/var(--tw-bg-opacity,1))
}

@media(max-width: 1628px) {
    .\\[\\@media\\(max-width\\:1628px\\)\\]\\:right-0 {
        right:0
    }
}

@media(min-width: 1628px) {
    .\\[\\@media\\(min-width\\:1628px\\)\\]\\:left-1\\/2 {
        left:50%
    }

    .\\[\\@media\\(min-width\\:1628px\\)\\]\\:ml-\\[670px\\] {
        margin-left: 670px
    }
}

i {
    font-style: normal;
}`,
}

// 编辑器设置处理器
const handleEditorSetup = (editor) => {
  editorInstance.value = editor

  editor.on('input change undo redo SetContent', () => {
    formData.pageDiv = editor.getContent()
    updateContentLength()
  })

  editor.on('init', () => {
    console.log('TinyMCE 编辑器初始化完成')

    if (formData.pageDiv) {
      editor.setContent(formData.pageDiv)
    } else {
      const emptyTable = `<table class="print_table">
<tbody>
</tbody>
</table>`
      editor.setContent(emptyTable)
      formData.pageDiv = emptyTable
    }
    updateContentLength()
  })
}

// 更新内容长度
const updateContentLength = () => {
  contentLength.value = formData.pageDiv ? formData.pageDiv.length : 0
}

// 获取商品详情
const fetchProductDetail = async () => {
  if (!productId.value) {
    ElMessage.error('商品ID不能为空')
    router.push('/products')
    return
  }

  loading.value = true
  try {
    const response = await productStore.fetchProductDetail(productId.value)
    if (response.success) {
      productInfo.value = response.data
      formData.id = response.data.id
      formData.title = response.data.title || ''
      formData.pageDiv = response.data.pageDiv || ''

      // 等待编辑器初始化完成后设置内容
      nextTick(() => {
        if (editorInstance.value) {
          editorInstance.value.setContent(formData.pageDiv || '<table class="print_table"><tbody></tbody></table>')
        }
        updateContentLength()
      })
    } else {
      ElMessage.error(response.message || '获取商品详情失败')
      router.push('/products')
    }
  } catch (error) {
    console.error('获取商品详情失败:', error)
    ElMessage.error('获取商品详情失败')
    router.push('/products')
  } finally {
    loading.value = false
  }
}

// 提交保存
const handleSubmit = async () => {
  if (!formRef.value) return

  try {
    await formRef.value.validate()

    if (!formData.pageDiv || formData.pageDiv.trim() === '<table class="print_table"><tbody></tbody></table>') {
      ElMessage.warning('请输入内容后再保存')
      return
    }

    saving.value = true

    const submitData = {
      id: formData.id,
      title: formData.title,
      pageDiv: formData.pageDiv
    }

    const response = await productStore.updateContent(submitData)
    if (response.success) {
      ElMessage.success('保存成功')
      productInfo.value = response.data
      formData.id = response.data.id
      formData.title = response.data.title || ''
      formData.pageDiv = response.data.pageDiv || ''

      // 等待编辑器初始化完成后设置内容
      nextTick(() => {
        if (editorInstance.value) {
          editorInstance.value.setContent(formData.pageDiv || '<table class="print_table"><tbody></tbody></table>')
        }
        updateContentLength()
      })
    } else {
      ElMessage.error(response.message || '保存失败')
    }
  } catch (error) {
    console.error('表单验证失败:', error)
    ElMessage.error('请检查输入内容')
  } finally {
    saving.value = false
  }
}


// 预览内容
const previewContent = () => {
  const content = formData.pageDiv

  if (!content || content.trim() === '<table class="print_table"><tbody></tbody></table>') {
    ElMessage.warning('内容为空或表格中无数据')
    return
  }

  previewHtml.value = `
    <div style="font-family: Arial, sans-serif; padding: 20px; background-color: #fff;">
      <h2 style="color: #409eff; border-bottom: 2px solid #409eff; padding-bottom: 10px; text-align: center">
        ${formData.title || productInfo.value?.title || '预览'}
      </h2>
      <style>
      .print_table td {
    vertical-align: middle;
    text-align: center;
    padding: 24px 0;
    border-bottom: 1px solid #eee
}

.print_table th {
    vertical-align: top;
    padding: 16px 0;
    background: #f6f8fa;
    font-size: 18px;
    color: #333
}

.print_table th.print_table_th_right {
    text-align: left;
    padding-left: 24px;
    line-height: 24px
}

.print_table_th_right .icon_common_singlearrow {
    margin: 0 10px
}

.print_table_time {
    font-size: 14px;
    color: #333;
    line-height: 18px;
    font-weight: 700
}

.print_table_time_text {
    font-size: 14px;
    color: #333;
    line-height: 18px;
    margin-top: 8px
}

.print_table td.print_table_td_right {
    text-align: left;
    padding-left: 24px
}

.print_table_title {
    font-size: 14px;
    color: #333;
    line-height: 18px;
    font-weight: 700;
    margin-bottom: 8px
}

.print_table_td_text {
    font-size: 14px;
    color: #333;
    line-height: 22px;
    margin-bottom: 4px
}

.print_table_td_text img {
\tmax-width: 100%
}

.print_table_td_or {
    margin-left: 32px;
    margin-right: 5px
}

.print_table tr:last-child td {
    border-bottom: 0
}

.print_table_td_gray {
    color: #666;
    line-height: 19px;
    margin-top: 8px
}

.print_table_grade_box {
    font-size: 14px;
    color: #333;
    line-height: 22px;
    margin-bottom: 6px
}

.print_table_grade_nb {
    font-weight: 700;
    margin-left: 8px
}

.print_table_grade_nb i {
    font-size: 12px
}

.print_table_grade_tip {
    background: #f6f8fa;
    border-radius: 1px;
    line-height: 20px;
    padding: 0 4px;
    margin-left: 8px
}

.print_table_text_gray {
    color: #999;
    margin-bottom: 8px;
    line-height: 22px
}

.bg-\\[\\#f6f8fa\\] {
    --tw-bg-opacity: 1;
    background-color: rgb(246 248 250 / var(--tw-bg-opacity, 1));
}

.p-4 {
    padding: 1rem;
}

.text-\\[\\#333\\] {
    --tw-text-opacity: 1;
    color: rgb(51 51 51 / var(--tw-text-opacity, 1));
}
.font-bold {
    font-weight: 700;
}
.text-\\[14px\\] {
    font-size: 14px;
}
</style>
      <div class="print_table_box" style="width: 964px;table-layout: fixed;overflow: hidden;margin: 0 auto;">
        ${content}
      </div>
    </div>
  `
  previewVisible.value = true
}

// 页面挂载时执行
onMounted(async () => {
  await fetchProductDetail()

})
</script>

<style scoped>
.page-div-editor {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

/* 独立模式样式 */
.page-div-editor.standalone-mode {
  background-color: #fff;
}

.page-div-editor.standalone-mode .page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.page-div-editor.standalone-mode .page-title {
  color: white;
}

.standalone-logo .logo-text {
  font-size: 18px;
  font-weight: bold;
  color: white;
}

.page-header {
  background: white;
  border-bottom: 1px solid #e4e7ed;
  padding: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page-title {
  flex: 1;
  margin: 0 20px;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.page-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.editor-card {
  max-width: 1400px;
  margin: 0 auto;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.readonly-info {
  background: #f8f9fa;
  border-radius: 6px;
  padding: 16px;
  border: 1px solid #e4e7ed;
  margin-top: 16px;
}

.info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-item .label {
  font-weight: 600;
  color: #606266;
  min-width: 80px;
}

.info-item .value {
  color: #303133;
}

.info-item .value.price {
  color: #f56c6c;
  font-weight: bold;
  font-size: 16px;
}

.form-section {
  margin-bottom: 30px;
}

.form-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #409eff;
  margin: 25px 0 15px;
  padding-bottom: 8px;
  border-bottom: 2px solid #f0f9ff;
  font-size: 16px;
}

.editor-wrapper {
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  overflow: hidden;
  background: white;
}

.editor-toolbar {
  background: #f8f9fa;
  padding: 12px 20px;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.toolbar-info {
  font-size: 14px;
  color: #909399;
}

.tinymce-editor {
  background: white;
  min-height: 600px;
}

.editor-footer {
  background: #f8f9fa;
  padding: 12px 20px;
  border-top: 1px solid #ebeef5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content-length {
  font-size: 12px;
  color: #909399;
}

.last-modified {
  font-size: 12px;
  color: #909399;
}

.preview-dialog {
  .preview-toolbar {
    margin-bottom: 20px;
    text-align: center;
  }

  .preview-content {
    max-height: 60vh;
    overflow-y: auto;
    border: 1px solid #ebeef5;
    border-radius: 8px;
  }

  .preview-content.table {
    padding: 20px;
    background: #fafbfc;
  }

  .preview-content pre {
    margin: 0;
    padding: 20px;
    background: #f6f8fa;
    color: #24292e;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 13px;
    line-height: 1.5;
  }
}

/* TinyMCE 编辑器样式覆盖 */
:deep(.tox) {
  border-radius: 0 !important;
}

:deep(.tox-tinymce) {
  border: none !important;
  border-radius: 0 !important;
}

:deep(.tox-editor-header) {
  border-bottom: 1px solid #ebeef5 !important;
  background: #fafbfc !important;
}

:deep(.tox-toolbar__primary) {
  background: #fafbfc !important;
}

:deep(.tox-edit-area) {
  border: none !important;
}

/* 表格样式美化 */
:deep(.print_table) {
  width: 100%;
  border-collapse: collapse;
  margin: 15px 0;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

:deep(.print_table th),
:deep(.print_table td) {
  border: 1px solid #e4e7ed;
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
}

:deep(.print_table_time) {
  font-weight: 600;
  color: #409eff;
  font-size: 14px;
  margin: 0 0 5px 0;
}

:deep(.print_table_time_text) {
  color: #909399;
  font-size: 12px;
  margin: 0;
}

:deep(.print_table_title) {
  font-weight: 600;
  color: #303133;
  font-size: 15px;
  margin: 0 0 10px 0;
  padding: 6px 12px;
  background-color: #f0f9ff;
  border-left: 4px solid #409eff;
  border-radius: 4px;
}

:deep(.print_table_td_right) {
  background-color: #fefefe;
}

:deep(.print_table_td_text) {
  margin: 10px 0;
  line-height: 1.8;
  color: #606266;
}

:deep(.print_table_td_gray) {
  color: #909399;
  font-size: 12px;
  margin: 8px 0 0 0;
  font-style: italic;
}
</style>